<template>
  <view>
    <view class="main">
      <image
        class="topCoverImg"
        :src="topCoverImg"
        mode="aspectFill"
        lazy-load="true"
      >
      </image>
      <view class="top_content">
        <view class="top_title_image" bindtap="onClickFavourite"> </view>
        <view class="top_content_title">
          <view class="top_title_name">{{ name }}</view>
          <view class="top_little"></view>
        </view>
        <u-parse :html="content" style="padding: 20rpx;"></u-parse>
      </view>
      <view>
        <u-back-top :scroll-top="scrollTop"></u-back-top>
      </view>
    </view>
  </view>
</template>
<script>
import {newsInfo} from "../../../common/api/news";
export default {
  name: "newsDetail",
  data() {
    return {
      topCoverImg: "https://img2.baidu.com/it/u=3209133658,2686675697&fm=26&fmt=auto&gp=0.jpg",
      name: "",
      commentNum: "",
      content: '',
      scrollTop: 0,
    };
  },
  onLoad(options) {
    let _options = this.$Router.extract(options);
    newsInfo({content_id: _options.content_id}).then(res => {
      // console.log('newsDetail----',res);
      this.name = res.name;
      this.content = res.content
    })
  },
  methods: {
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  width: 100vw;
  /* height: 100vh; */
}
.topCoverImg {
  width: 100vw;
  height: 400rpx;
  position: absolute;
  top: 0;
  left: 0;
}
.top_content {
  width: 100vw;
  margin-top: 370rpx;
  background: #ffffff;
  border-radius: 30rpx;
  position: relative;
}
.top_content_title {
  display: flex;
  flex-direction: column;
}
.top_title_image {
  position: absolute;
  top: 30rpx;
  left: 628rpx;
  display: flex;
  flex-direction: row;
}
.top_title_img {
  width: 32rpx;
  height: 30rpx;
}
.top_title_doc {
  width: 72rpx;
  height: 24rpx;
  font-size: 24rpx;
  color: #f13a3a;
  margin-left: 11rpx;
}
.top_title_doc1 {
  width: 48rpx;
  height: 24rpx;
  font-size: 24rpx;
  color: #999999;
  margin-left: 11rpx;
}
.top_title_name {
  padding-top: 40rpx;
  font-size: 36rpx;
  font-weight: 700;
  color: #333333;
  margin-left: 40rpx;
}
.top_title_time {
  height: 24rpx;
  opacity: 0.99;
  font-size: 24rpx;
  color: #666666;
  font-weight: 700;
  margin-top: 30rpx;
  margin-left: 40rpx;
  display: flex;
  align-items: center;
}
.top_title_time1 {
  font-weight: 400;
}
.top_little {
  width: 670rpx;
  height: 1rpx;
  background-color: #eeeeee;
  margin-top: 39rpx;
  margin-left: 41rpx;
}
.top_content_page {
  margin-top: 40rpx;
  margin-left: 40rpx;
  width: 670rpx;
  display: flex;
  /* justify-content: center; */
  font-size: 28rpx;
  color: #333333;
  padding-bottom: 150rpx;
}

.bottomContainer {
  width: 100vw;
  height: 100rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  /* justify-content: flex-end; */
  background: #eeeeee;
}

.commentBox {
  width: 100vw;
  height: 100%;
  padding: 0 50rpx;
}

.leftBox {
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  font-size: 24rpx;
  color: #333333;
}

.commentBox .text {
  font-size: 24rpx;
  margin: 0 8rpx 0 12rpx;
  display: flex;
  align-items: center;
}

.text .num {
  font-size: 32rpx;
  margin-right: 4rpx;
  position: relative;
  top: -3rpx;
}

	.wrap {
		height: 200vh;
	}
</style>
